/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import {Text, TouchableHighlight} from 'react-native';
import Design from '../design';
import Config from '../config';
import ScreenBase from '../library/base/screen';
// import SplashScreen from 'react-native-splash-screen';
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../library/comp';
import {
    HttpText, HttpHesq
} from '../library/func';

/**************************************************************************************** Restful */
const restful = {

    // 页面加载
    httpload(param) {
        return {
            url: 'https://www.baidu.com',
            data: {
                name: 'uyumn'
            },
            config: {
                indicator: true,
                isEmpty: (data)=> {
                    return false;
                }
            }
        };
    },

    // 其它页面的预先加载
    preload: {
        // http类型
        testhttp(param) {
            return {
                type: 'http',
                url: 'https://www.baidu.com',
                data: {},
                config: {
                    indicator: true,
                    key: 'preload_testhttp',
                    default: {},
                    screen: 'Test',
                    param: {}
                }
            }
        },
        // cache类型
        testcache(param) {
            const value = param.value || {};
            return {
                type: 'cache',
                config: {
                    key: 'preload_testcache',
                    data: value,
                    screen: 'Test',
                    param: {}
                }
            }
        }
    },

    // 提交动作
    post() {

    }
};

/**************************************************************************************** Screen */
 export default class Home extends ScreenBase {

	// ----------------------------------------------------------------------------------- 初始化
	constructor(props) {
        super(props, restful);
        this.state = {
            screen: this.screenLoad,
            data: ''
        }
        // console.log(this.state)
        // this.init();
    }
    
    // ---------------------------------------------------------------------------------- 生命周期
    /**
     * didMount
     */
    componentDidMount(){
        this.httpload({});

        // 关闭启动画面
        // SplashScreen.hide();

        // HttpText.get({
        //     url: 'https://www.bai333333333du.com',
        //     data: {
        //         name: 'yuantao'
        //     },
        //     success: (data)=> {
        //         console.log('成功')
        //     },
        //     error: (res)=> {
        //         console.log('逻辑出错')
        //     },
        //     config: Config.http.test
        // })
    }

    // ---------------------------------------------------------------------------------- 自定义方法 

	// ---------------------------------------------------------------------------------- 渲染
    // 空数据渲染
    screenEmpty() {
        return (
            <CContent bg='#ddd' my='60'>
                <CText>空数据</CText>
            </CContent>
        );
    }

    // 成功时的渲染
    screenSuccess() {
        return (
            <CContent bg='#ddd' my='60'>

                {/* CRow */}
                <CRow bg='#999' mx='20' h='100' oncolor='#f60' onopacity='0.6' onPress={()=> {
                    // console.log(this.props.navigation);
                    // console.log(this.nav.navigate);
                    // this.nav.navigate('Test');
                    this.preload('testcache', {});

                }}>
                    <CText color='#f00' size='30'>CRow</CText>
                </CRow>
                {/* CRow End */}

                {/* CAround */}
                <CAround bg='#f60' h='100' my='30'>
                    <CLabel color='#f00' size='30'>Left</CLabel>
                    <CLabel color='#f00' size='30'>Center</CLabel>
                    <CLabel color='#f00' size='30'>Right</CLabel>
                </CAround>
                {/* CAround End */}

                {/* CBetween */}
                <CBetween bg='#999' h='80'>
                    <CButton oncolor='#ddd' bg='#f3f3f3' pa='20' ma='20' size='50' color='#f00' bold onPress={()=> {
                        console.log('test')
                    }}>TEST</CButton>
                    <CLabel pa='6 12' bg='#333' color='#f00' size='24'>Center</CLabel>
                    <CButton onopacity='0.3' bg='#f60' onPress={()=> {
                        console.log('test222')
                    }}>TEST222</CButton>
                </CBetween>
                {/* CBetween End */}

                {/* CCenter */}
                <CCenter bg='#f60' h='100' my='30'>
                    <CIcon icon={Design.icon.active_bg} w='60' h='60' color='#666'></CIcon>
                </CCenter>
                {/* CCenter End */}

                {/* CWrap */}
                <CWrap ma='20' bg='#f99'>
                    <CText>1234555   </CText>
                    <CText>1234555   </CText>
                    <CText>1234555   </CText>
                    <CText>1234555   </CText>
                    <CText>1234555   </CText>
                    <CText>1234555   </CText>
                    <CText>1234555   </CText>
                    <CText>1234555   </CText>
                </CWrap>
                {/* CWrap End */}

            </CContent>
        );
    }

    // 总render
	render() {
        const Screen = this.state.screen.bind(this);
		return (
            <CPage>
                <Screen></Screen>
                <CFloat right='20' bottom='200' ra='200' w='150' h='150' bg='#f60' x='center' y='center' oncolor='#999' onPress={()=> {
                    console.log('float')
                }}>
                    <CText color='#fff'>测</CText>
                </CFloat>
                <CHeader h='60' bg='#06f'>
                    <CLabel color='#f00' size='30'>Left</CLabel>
                    <CLabel color='#f00' size='30'>Center</CLabel>
                    <CLabel color='#f00' size='30'>Right</CLabel>
                </CHeader>
                <CFooter h='60' bg='#0f6'>
                    <CLabel color='#f00' size='30'>Left</CLabel>
                    <CLabel color='#f00' size='30'>Center</CLabel>
                    <CLabel color='#f00' size='30'>Right</CLabel>
                </CFooter>
            </CPage>
		);
	}
}